//安全检查完成率
jSecurityCheckEchart();
function jSecurityCheckEchart() {
  let linePassengerVC = document.getElementsByClassName("jSecurityCheckEchart");
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    var xData = ["10号线二期", "14号线", "15号线", "18号线"],
      yData1 = [57, 57, 57, 58],
      yData2 = [29, 29, 29, 29],
      yData3 = [47, 58, 56, 56],
      yData4 = [80, 85, 82, 80],
      borderData = [100, 100, 100, 100],
      legend = ["年度数量", "计划完成量", "实际完成量", "完成率"],
      colorArr = [
        {
          start: "rgba(155, 101, 229,",
          end: "rgba(18, 58, 86,0.5)",
        },
        {
          start: "rgba(71, 173, 245,",
          end: "rgba(18, 58, 86,0.5)",
        },
        {
          start: "rgba(82, 249, 107,",
          end: "rgba(18, 58, 86,0.5)",
        },
        {
          color: "#00EAFF",
        },
      ];
    var normalColor = "#fff";
    let seriesData = [];
    var borderHeight = 4;
    xData.forEach((element) => {
      borderData.push(borderHeight);
    });
    [yData1, yData2, yData3, yData4].forEach((item, index) => {
      var obj1 = {};
      var obj2 = {};
      if (index < 3) {
        obj1 = {
          name: legend[index],
          type: "bar",
          stack: legend[index],
          data: item,
          barWidth: "15%",
          itemStyle: {
            normal: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: colorArr[index].start + "0.7)",
                  },
                  {
                    offset: 0.5,
                    color: colorArr[index].start + "0.3)",
                  },
                  {
                    offset: 1,
                    color: colorArr[index].end,
                  },
                ],
                globalCoord: false,
              },
            },
          },
        };
        obj2 = {
          name: "",
          type: "bar",
          stack: legend[index],
          itemStyle: {
            normal: {
              color: colorArr[index].start + "1)",
            },
          },
          data: borderData,
        };
        seriesData.push(obj1);
        seriesData.push(obj2);
      } else {
        var obj3 = {
          name: legend[index],
          type: "line",
          yAxisIndex: 1,
          smooth: false,
          symbol: "circle",
          symbolSize: 10,
          lineStyle: {
            normal: {
              width: 2,
            },
          },
          itemStyle: {
            normal: {
              color: colorArr[index].color,
              borderColor: "#fff",
              borderWidth: 1,
            },
          },
          data: item,
          label: {
            normal: {
              show: false,
            },
          },
        };
        seriesData.push(obj3);
      }
    });
    console.log(seriesData);
    option = {
      grid: {
        left: "3%",
        top: "20%",
        right: "3%",
        bottom: "5%",
        containLabel: true,
      },
      legend: {
        show: true,
        icon: "rect",
        itemWidth: 20,
        itemHeight: 3,
        right: "5%",
        top: "3%",
        textStyle: {
          color: "#fff",
        },
        data: legend,
      },
      tooltip: {
        trigger: "axis",
        formatter: function (params) {
          var str = "";
          for (var i = 0; i < params.length; i++) {
            if (params[i].seriesName !== "") {
              str +=
                params[i].name +
                ":" +
                params[i].seriesName +
                params[i].value +
                "<br/>";
            }
          }
          return str;
        },
      },
      xAxis: [
        {
          type: "category",
          data: xData,
          axisPointer: {
            type: "shadow",
          },
          axisLabel: {
            textStyle: {
              color: normalColor,
              fontSize: 12,
            },
          },
          axisLine: {
            lineStyle: {
              color: normalColor,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "数量",
          nameTextStyle: {
            color: normalColor,
            fontSize: 12,
          },
          // "min": 0,
          // "max": 50,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: normalColor,
              fontSize: 12,
            },
          },
          axisLine: {
            lineStyle: {
              color: normalColor,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: "dashed",
              color: normalColor,
            },
          },
        },
        {
          type: "value",
          name: "%",
          nameTextStyle: {
            color: normalColor,
            fontSize: 12,
          },
          min: -100,
          max: 100,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: normalColor,
              fontSize: 12,
            },
          },
          axisLine: {
            lineStyle: {
              color: normalColor,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "rgba(255,255,255,0.2)",
            },
          },
        },
      ],
      series: seriesData,
    };
    myChart.setOption(option);
  }
}
// 安全隐患整改闭合率;
hiddenDangerEchart();
function hiddenDangerEchart() {
  let linePassengerVC = document.getElementsByClassName("hiddenDangerEchart");
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    var data = [
        {
          name: "10号线二期",
          value: 98,
        },
        {
          name: "14号线",
          value: 123,
        },
        {
          name: "15号线",
          value: 127,
        },
        {
          name: "18号线",
          value: 115,
        },
      ],
      legend = [
        {
          name: "10号线二期",
          backgroundColor: "#fff",
        },
        "14号线",
        "15号线",
        "18号线",
      ];
    arrName = getArrayValue(data, "name");
    arrValue = getArrayValue(data, "value");
    sumValue = 150;
    var bgLineColor = "rgba(255,255,255,0.3)";
    objData = array2obj(data, "name");
    optionData = getData(data);
    company = "个";
    function getArrayValue(array, key) {
      var key = key || "value";
      var res = [];
      if (array) {
        array.forEach(function (t) {
          res.push(t[key]);
        });
      }
      return res;
    }

    function array2obj(array, key) {
      var resObj = {};
      for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i];
      }
      return resObj;
    }

    function getData(data) {
      var res = {
        series: [
          {
            name: "大环",
            type: "gauge",
            splitNumber: 15,
            radius: "85%",
            center: ["40%", "55%"],
            startAngle: 90,
            endAngle: -269.9999,
            axisLine: {
              show: false,
              lineStyle: {
                color: [[1, bgLineColor]],
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              length: 12,
              lineStyle: {
                color: "auto",
                width: 1.5,
              },
            },
            axisLabel: {
              show: false,
            },
            detail: {
              show: false,
            },
          },
          {
            name: "小环",
            type: "gauge",
            splitNumber: 15,
            radius: "80%",
            center: ["40%", "55%"],
            startAngle: 90,
            endAngle: -269.9999,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: bgLineColor,
                width: 1,
              },
              length: 5,
              splitNumber: 2,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            detail: {
              show: false,
            },
          },
        ],
        yAxis: [],
      };
      for (let i = 0; i < data.length; i++) {
        res.series.push({
          name: "学历",
          type: "pie",
          clockWise: false,
          z: 2,
          hoverAnimation: false,
          radius: [73 - i * 15 + "%", 68 - i * 15 + "%"],
          center: ["40%", "55%"],
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: [
            {
              value: data[i].value,
              name: data[i].name,
              itemStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#0050E2",
                    },
                    {
                      offset: 1,
                      color: "#fff",
                    },
                  ],
                  global: false,
                },
              },
            },
            {
              value: sumValue - data[i].value,
              name: "",
              itemStyle: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              label: {
                show: false,
              },
              hoverAnimation: false,
            },
          ],
        });
        res.series.push({
          name: "背景线",
          type: "pie",
          silent: true,
          z: 1,
          clockWise: false,
          hoverAnimation: false,
          radius: [73 - i * 15 + "%", 69 - i * 15 + "%"],
          center: ["40%", "55%"],
          label: {
            show: false,
          },
          itemStyle: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            borderWidth: 10,
          },
          data: [
            {
              value: 100,
              itemStyle: {
                color: "rgba(255,255,255,0.3)",
                borderWidth: 10,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
          ],
        });
        res.yAxis.push(data[i].name);
      }
      return res;
    }

    option = {
      title: {
        text: "安全隐患数",
        left: "40%",
        top: "50%",
        textAlign: "center",
        textStyle: {
          fontWeight: "normal",
          fontSize: "16",
          color: "#fff",
          textAlign: "center",
        },
      },
      grid: {
        top: "16%",
        bottom: "54%",
        left: "50%",
        containLabel: false,
      },
      legend: {
        icon: "circle",
        orient: "vertical",
        right: "0%",
        top: "10%",
        itemGap: 2,
        itemWidth: 20,
        itemHeight: 10,
        textStyle: {
          color: "#fff",
        },
        formatter: function (params) {
          return params + objData[params].value + company;
        },
        data: legend,
      },
      yAxis: [
        {
          type: "category",
          inverse: true,
          z: 3,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            inside: false,
            textStyle: {
              color: "RGB(78,184,252)",
              fontSize: 25,
            },
            show: false,
          },
          data: optionData.yAxis,
        },
      ],
      xAxis: [
        {
          show: false,
        },
      ],
      series: optionData.series,
    };
    myChart.setOption(option);
  }
  let hiddenDangerEt = document.getElementsByClassName("hiddenDangerEchartt");
  for (var i = 0; i < hiddenDangerEt.length; i++) {
    let myChart = echarts.init(hiddenDangerEt[i]);
    var data = [
        {
          name: "10号线二期",
          value: 98,
        },
        {
          name: "14号线",
          value: 123,
        },
        {
          name: "15号线",
          value: 127,
        },
        {
          name: "18号线",
          value: 115,
        },
      ],
      legend = [
        {
          name: "10号线二期",
          backgroundColor: "#fff",
        },
        "14号线",
        "15号线",
        "18号线",
      ];
    arrName = getArrayValue(data, "name");
    arrValue = getArrayValue(data, "value");
    sumValue = 150;
    var bgLineColor = "rgba(255,255,255,0.3)";
    objData = array2obj(data, "name");
    optionData = getData(data);
    company = "个";
    function getArrayValue(array, key) {
      var key = key || "value";
      var res = [];
      if (array) {
        array.forEach(function (t) {
          res.push(t[key]);
        });
      }
      return res;
    }

    function array2obj(array, key) {
      var resObj = {};
      for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i];
      }
      return resObj;
    }

    function getData(data) {
      var res = {
        series: [
          {
            name: "大环",
            type: "gauge",
            splitNumber: 15,
            radius: "85%",
            center: ["40%", "55%"],
            startAngle: 90,
            endAngle: -269.9999,
            axisLine: {
              show: false,
              lineStyle: {
                color: [[1, bgLineColor]],
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              length: 12,
              lineStyle: {
                color: "auto",
                width: 1.5,
              },
            },
            axisLabel: {
              show: false,
            },
            detail: {
              show: false,
            },
          },
          {
            name: "小环",
            type: "gauge",
            splitNumber: 15,
            radius: "80%",
            center: ["40%", "55%"],
            startAngle: 90,
            endAngle: -269.9999,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: bgLineColor,
                width: 1,
              },
              length: 5,
              splitNumber: 2,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            detail: {
              show: false,
            },
          },
        ],
        yAxis: [],
      };
      for (let i = 0; i < data.length; i++) {
        res.series.push({
          name: "学历",
          type: "pie",
          clockWise: false,
          z: 2,
          hoverAnimation: false,
          radius: [73 - i * 15 + "%", 68 - i * 15 + "%"],
          center: ["40%", "55%"],
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: [
            {
              value: data[i].value,
              name: data[i].name,
              itemStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#0050E2",
                    },
                    {
                      offset: 1,
                      color: "#fff",
                    },
                  ],
                  global: false,
                },
              },
            },
            {
              value: sumValue - data[i].value,
              name: "",
              itemStyle: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              label: {
                show: false,
              },
              hoverAnimation: false,
            },
          ],
        });
        res.series.push({
          name: "背景线",
          type: "pie",
          silent: true,
          z: 1,
          clockWise: false,
          hoverAnimation: false,
          radius: [73 - i * 15 + "%", 69 - i * 15 + "%"],
          center: ["40%", "55%"],
          label: {
            show: false,
          },
          itemStyle: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            borderWidth: 10,
          },
          data: [
            {
              value: 100,
              itemStyle: {
                color: "rgba(255,255,255,0.3)",
                borderWidth: 10,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
          ],
        });
        res.yAxis.push(data[i].name);
      }
      return res;
    }

    option = {
      title: {
        text: "整改闭合数",
        left: "40%",
        top: "50%",
        textAlign: "center",
        textStyle: {
          fontWeight: "normal",
          fontSize: "16",
          color: "#fff",
          textAlign: "center",
        },
      },
      grid: {
        top: "16%",
        bottom: "54%",
        left: "50%",
        containLabel: false,
      },
      legend: {
        icon: "circle",
        orient: "vertical",
        right: "5%",
        top: "10%",
        itemGap: 2,
        itemWidth: 20,
        itemHeight: 10,
        textStyle: {
          color: "#fff",
        },
        formatter: function (params) {
          return params + objData[params].value + company;
        },
        data: legend,
      },
      yAxis: [
        {
          type: "category",
          inverse: true,
          z: 3,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            inside: false,
            textStyle: {
              color: "RGB(78,184,252)",
              fontSize: 25,
            },
            show: false,
          },
          data: optionData.yAxis,
        },
      ],
      xAxis: [
        {
          show: false,
        },
      ],
      series: optionData.series,
    };
    myChart.setOption(option);
  }
  let hiddenDangercloseC = document.getElementsByClassName(
    "hiddenDangercloseEchart"
  );
  for (var i = 0; i < hiddenDangercloseC.length; i++) {
    let myChart = echarts.init(hiddenDangercloseC[i]);
    var value = 100;
    option = {
      title: {
        text: `${value}%`,
        subtext: "安全隐患整改闭合率",
        left: "center",
        top: "center", //top待调整
        textStyle: {
          color: "#fff",
          fontSize: 20,
          fontFamily: "DINAlternate-Bold",
        },
        subtextStyle: {
          color: "#ff",
          fontSize: 12,
          fontFamily: "PingFangSC-Regular",
          top: "center",
        },
        itemGap: -4, //主副标题间距
      },
      xAxis: {
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        // data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
      },
      yAxis: {
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
      series: [
        // 内圆
        {
          type: "pie",
          radius: ["0", "48%"],
          center: ["50%", "50%"],
          z: 0,
          label: {
            normal: {
              position: "inner",
              show: false,
            },
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#1147A1",
                },
                {
                  offset: 0.5,
                  color: "#423DB3",
                },
                {
                  offset: 1,
                  color: "#1147A1",
                },
              ]),
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },
          label: {
            normal: {
              position: "center",
            },
          },
          data: [100],
        },
        // 进度圈
        {
          type: "pie",
          clockWise: true,
          radius: ["60%", "59%"],
          label: {
            normal: {
              position: "inner",
              show: false,
            },
          },
          data: [
            {
              value: value,
              itemStyle: {
                normal: {
                  borderWidth: 10,
                  borderColor: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#7940FE" || "#00cefc", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#2A69EC" || "#367bec", // 100% 处的颜色
                      },
                    ],
                  },
                  color: {
                    // 完成的圆环的颜色
                    colorStops: [
                      {
                        offset: 0,
                        color: "#7940FE" || "#00cefc", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#2A69EC" || "#367bec", // 100% 处的颜色
                      },
                    ],
                  },
                  label: {
                    show: false,
                    position: "inner",
                  },
                  labelLine: {
                    show: false,
                  },
                },
              },
            },
            {
              name: "gap",
              value: 100 - value,
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  color: "rgba(0, 0, 0, 0)",
                  borderColor: "rgba(0, 0, 0, 0)",
                  borderWidth: 0,
                },
              },
            },
          ],
        },
        //刻度尺
        {
          // name: "白色圈刻度",
          type: "gauge",
          radius: "85%",
          startAngle: 225, //刻度起始
          endAngle: -134.8, //刻度结束
          z: 4,
          axisTick: {
            show: true,
            lineStyle: {
              width: 2,
              color: "rgba(1,244,255, 0.9)",
            },
          },
          splitLine: {
            length: 12, //刻度节点线长度
            lineStyle: {
              width: 2,
              color: "rgba(1,244,255, 0.9)",
            }, //刻度节点线
          },
          axisLabel: {
            color: "rgba(255,255,255,0)",
            fontSize: 12,
          }, //刻度节点文字颜色
          pointer: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              opacity: 0,
            },
          },
          detail: {
            show: false,
          },
          data: [
            {
              value: 0,
              name: "",
            },
          ],
        },
        // 刻度圈
        {
          type: "pie",
          radius: ["0%", "70%"],
          center: ["50%", "50%"],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: "center",
            },
            emphasis: {
              show: false,
              textStyle: {
                fontWeight: "bold",
              },
            },
          },
          itemStyle: {
            normal: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0.05,
                    color: "rgba(32,36,107, 0.2)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(32,36,107,0.3)",
                  },
                  {
                    offset: 0.95,
                    color: "rgba(32,36,107, 0.2)",
                  },
                ],
              },
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
            labelLine: {
              show: false,
            },
          },
          data: [
            {
              value: 3235,
            },
          ],
        },
        //最外层圈
        {
          type: "pie",
          radius: ["0%", "80%"],
          center: ["50%", "50%"],
          avoidLabelOverlap: false,
          hoverAnimation: false,
          label: {
            normal: {
              show: false,
              position: "center",
            },
            emphasis: {
              show: false,
              textStyle: {
                fontWeight: "bold",
              },
            },
          },
          itemStyle: {
            normal: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0.05,
                    color: "rgba(21,24,65, 0.2)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(21,24,65, 0.3)",
                  },
                  {
                    offset: 0.95,
                    color: "rgba(21,24,65, 0.2)",
                  },
                ],
              },
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
          data: [
            {
              value: 3235,
            },
          ],
        },
      ],
    };
    myChart.setOption(option);
  }
}
//安全评价优胜率
safetyEvaluationEchart();
function safetyEvaluationEchart() {
  let safetyEvaluationE = document.getElementsByClassName(
    "safetyEvaluationEchart"
  );
  for (var i = 0; i < safetyEvaluationE.length; i++) {
    let myChart = echarts.init(safetyEvaluationE[i]);
    var highlight = "#fff";
    var demoData = [
      {
        name: "10号线二期",
        value: 74.07,
        unit: "%",
        pos: ["25%", "25%"],
        range: [0, 100],
        colora: "#1db0d2",
        colorb: "#44ceef",
      },
      {
        name: "14号线",
        value: 73.08,
        unit: "%",
        pos: ["75%", "25%"],
        range: [0, 100],
        colora: "#e6658f",
        colorb: "#f8a58b",
      },
      {
        name: "15号线",
        value: 66.67,
        unit: "%",
        pos: ["25%", "75%"],
        range: [0, 100],
        colora: "#1ea899",
        colorb: "#29c582",
      },
      {
        name: "18号线",
        value: 73.75,
        unit: "%",
        pos: ["75%", "75%"],
        range: [0, 100],
        colora: "#c188f4",
        colorb: "#f2a6c8",
      },
    ];

    option = {
      series: (function () {
        var result = [];

        demoData.forEach(function (item) {
          result.push(
            // 外围刻度
            {
              type: "gauge",
              center: item.pos,
              radius: "35%", // 1行3个
              splitNumber: item.splitNum || 10,
              min: 0,
              max: 100,
              startAngle: 225,
              endAngle: -45,
              axisLine: {
                show: true,
                lineStyle: {
                  width: 1,
                  color: [[1, "rgba(0,0,0,0)"]],
                },
              }, //仪表盘轴线
              axisTick: {
                show: true,
                lineStyle: {
                  color: "rgba(255,255,255,0.6)",
                  width: 1,
                },
                length: -8,
              }, //刻度样式
              splitLine: {
                show: true,
                length: -15,
                lineStyle: {
                  color: "rgba(255,255,255,0.6)",
                },
              }, //分隔线样式
              axisLabel: {
                show: false,
                distance: -15,
                // textStyle: {
                //   color: highlight,
                //   fontSize: "14",
                //   fontWeight: "bold",
                // },
              },
              pointer: {
                show: 0,
              },
              detail: {
                show: 0,
              },
            },

            // 内侧指针、数值显示
            {
              name: item.name,
              type: "gauge",
              center: item.pos,
              radius: "30%",
              startAngle: 225,
              endAngle: -45,
              min: 0,
              max: 100,
              axisLine: {
                show: true,
                lineStyle: {
                  width: 3,
                  color: [
                    [
                      item.value / 100,
                      new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        {
                          offset: 0,
                          color: item.colora,
                        },
                        {
                          offset: 1,
                          color: item.colorb,
                        },
                      ]),
                    ],
                    [1, "#222e7d"],
                  ],
                },
              },
              axisTick: {
                show: 0,
              },
              splitLine: {
                show: 0,
              },
              axisLabel: {
                show: 0,
              },
              pointer: {
                show: false,
                length: "105%",
              },
              detail: {
                show: true,
                offsetCenter: [0, "15%"],
                textStyle: {
                  fontSize: 16,
                  color: "#fff",
                },
                formatter: [
                  "{value} " + (item.unit || ""),
                  "{name|" + item.name + "}",
                ].join("\n"),
                rich: {
                  name: {
                    fontSize: 12,
                    lineHeight: 30,
                    color: "#ddd",
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: highlight,
                },
              },
              data: [
                {
                  value: item.value,
                },
              ],
            }
          );
        });

        return result;
      })(),
    };
    myChart.setOption(option);
  }
}
//安全标准化达标率
safetyStandardsEchart();
function safetyStandardsEchart() {
  let safetyStandardsE = document.getElementsByClassName(
    "safetyStandardsEchart"
  );
  for (var i = 0; i < safetyStandardsE.length; i++) {
    let myChart = echarts.init(safetyStandardsE[i]);
    var xData = ["10号线二期", "14号线", "15号线", "18号线"];
    var lineData = [100, 100, 100, 100, 100, 100, 100];
    var lastYearData = [6, 27, 26, 21];
    var thisYearData = [6, 27, 26, 21];
    var timeLineData = [1];
    var bili = [100, 100, 100, 100];
    let legend = ["安全标准化申报数", "安全标准化达标数"];
    let textColor = "#fff";
    let lineColor = "rgba(255,255,255,0.2)";
    let colors = [
      {
        borderColor: "rgba(227,161,96,1)",
        start: "rgba(227,161,96,0.8)",
        end: "rgba(227,161,96,0.3)",
      },
      {
        borderColor: "rgba(0,222,255,1)",
        start: "rgba(0,222,255,0.3)",
        end: "rgba(0,222,255,0.8)",
      },
    ];
    let borderData = [];
    let scale = 2;
    borderData = xData.map((item) => {
      return scale;
    });
    var option = {
      baseOption: {
        timeline: {
          show: false,
          top: 0,
          data: [],
        },
        legend: {
          top: "1%",
          right: "2%",
          itemWidth: 20,
          itemHeight: 5,
          // itemGap: 343,
          icon: "horizontal",
          textStyle: {
            color: "#ffffff",
            fontSize: 12,
          },
          data: legend,
        },
        grid: [
          {
            show: false,
            left: "5%",
            top: "12%",
            bottom: "5%",
            right: "15%",
            containLabel: true,
            width: "37%",
          },
          {
            show: false,
            left: "51.5%",
            top: "14%",
            bottom: "5%",
            width: "0%",
          },
          {
            show: false,
            right: "5%",
            top: "12%",
            bottom: "5%",
            containLabel: true,
            width: "37%",
          },
        ],
        xAxis: [
          {
            type: "value",
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            position: "top",
            axisLabel: {
              show: true,
              color: textColor,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: lineColor,
              },
            },
          },
          {
            gridIndex: 1,
            show: false,
          },
          {
            gridIndex: 2,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            position: "top",
            axisLabel: {
              show: true,
              color: textColor,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: lineColor,
              },
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            inverse: true,
            position: "right",
            axisLine: {
              show: true,
              lineStyle: {
                color: lineColor,
              },
            },

            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            data: xData,
          },
          {
            gridIndex: 1,
            type: "category",
            inverse: true,
            position: "left",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              padding: [30, 0, 0, 0, 20],
              textStyle: {
                color: "#ffffff",
                fontSize: 12,
              },
              align: "center",
            },
            data: xData.map(function (value) {
              return {
                value: value,
                textStyle: {
                  align: "center",
                },
              };
            }),
          },
          {
            gridIndex: 2,
            type: "category",
            inverse: true,
            position: "left",
            axisLine: {
              show: true,
              lineStyle: {
                color: lineColor,
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            data: xData,
          },
        ],
        series: [],
      },
      options: [],
    };

    option.baseOption.timeline.data.push(timeLineData[0]);
    option.options.push({
      series: [
        {
          name: "安全标准化申报数	",
          type: "bar",
          barWidth: 25,
          stack: "1",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: colors[0].start,
                },
                {
                  offset: 1,
                  color: colors[0].end,
                },
              ]),
            },
          },
          label: {
            show: true,
            // position: "top",
            // formatter: "{c}%", //在柱状图的顶部显示出某个东西和这个东西的百分比值
          },
          data: lastYearData,
          animationEasing: "elasticOut",
        },
        {
          name: "安全标准化申报数",
          type: "bar",
          barWidth: 25,
          stack: "1",
          itemStyle: {
            normal: {
              color: colors[0].borderColor,
            },
          },
          // label: {
          //   show: true,
          //   position: "top",
          //   formatter: "{c}%", //在柱状图的顶部显示出某个东西和这个东西的百分比值
          // },
          data: borderData,
        },
        {
          name: "安全标准化达标数",
          type: "bar",
          stack: "2",
          barWidth: 25,
          xAxisIndex: 2,
          yAxisIndex: 2,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: colors[1].start,
                },
                {
                  offset: 1,
                  color: colors[1].end,
                },
              ]),
            },
          },
          label: {
            normal: {
              show: true,
            },
          },
          data: thisYearData,
          animationEasing: "elasticOut",
        },
        {
          name: "安全标准化达标数",
          type: "bar",
          xAxisIndex: 2,
          yAxisIndex: 2,
          barWidth: 25,
          stack: "2",
          itemStyle: {
            normal: {
              color: colors[1].borderColor,
            },
          },
          data: borderData,
        },
      ],
    });
    myChart.setOption(option);
  }
}
//文明工地达标率
civilizedConstructionSiteEchart();
function civilizedConstructionSiteEchart() {
  let linePassengerVC = document.getElementsByClassName(
    "civilizedConstructionSiteEchart"
  );
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    var fourPieData = [
      {
        title: "文明工地创建率",
        value: 100,
      },
      {
        title: "文明工地达标率",
        value: 86,
      },
      {
        title: "市级升级版\n文明工地达标率",
        value: 100,
      },
    ];
    var titleArr = [],
      seriesArr = [];
    fourPieData.forEach(function (item, index) {
      titleArr.push({
        text: `${item.title}\n${item.value}%`,
        left: index < 2 ? index * 50 + 24 + "%" : index * 50 - 51 + "%",
        top: index < 2 ? "20%" : "65%",
        textAlign: "center",
        textStyle: {
          fontSize: 12,
          color: "#ffffff",
        },
      });
      seriesArr.push(
        {
          type: "gauge",
          radius: "40%",
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 50 + "%",
            index < 2 ? "25%" : "72%",
          ],
          clockwise: false,
          startAngle: "-80",
          endAngle: "-439.9999",
          splitNumber: 25,
          detail: {
            offsetCenter: [0, -20],
            formatter: " ",
          },
          pointer: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: [
                [0, "#2CFAFC"],
                [(100-item.value) / 100, "#00FFFF"],
                [1, "#0E192D"],
              ],
              width: 10,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            length: 10,
            lineStyle: {
              color: "#0E192D",
              width: 6,
            },
          },
          axisLabel: {
            show: false,
          },
        },
        {
          name: "最内层虚线圈",
          type: "pie",
          radius: ["24%", "25%"],
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 50 + "%",
            index < 2 ? "25%" : "72%",
          ],
          hoverAnimation: false,
          clockWise: false,
          itemStyle: {
            normal: {
              color: "red",
            },
          },
          label: {
            show: false,
          },
          data: setdata(),
        },
        {
          type: "pie",
          name: "内层细圆环",
          radius: ["31%", "31.5%"],
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 50 + "%",
            index < 2 ? "25%" : "72%",
          ],
          hoverAnimation: false,
          clockWise: false,
          itemStyle: {
            normal: {
              color: "#00FFFF",
            },
          },
          label: {
            show: false,
          },
          data: [100],
        },
        {
          type: "pie",
          name: "外层细圆环",
          radius: ["41%", "42%"],
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 50 + "%",
            index < 2 ? "25%" : "72%",
          ],
          hoverAnimation: false,
          clockWise: false,
          itemStyle: {
            normal: {
              color: "#00FFFF",
            },
          },
          label: {
            show: false,
          },
          data: [100],
        },
        {
          name: "大环",
          type: "gauge",
          splitNumber: 35,
          radius: "52%",
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 50 + "%",
            index < 2 ? "25%" : "72%",
          ],
          startAngle: 90,
          endAngle: -269.9999,
          axisLine: {
            show: false,
            lineStyle: {
              color: [[1, "#00FFFF"]],
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            length: 10,
            lineStyle: {
              color: "auto",
              width: 1.5,
            },
          },
          axisLabel: {
            show: false,
          },
          detail: {
            show: false,
          },
        }
      );
    });
    function setdata() {
      let dataArr = [];
      for (var i = 0; i < 100; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 10,
            itemStyle: {
              normal: {
                color: "rgb(0,255,255,.3)",
              },
            },
          });
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 100,
            itemStyle: {
              normal: {
                color: "rgb(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,255,255,1)",
              },
            },
          });
        }
      }
      return dataArr;
    }
    // function startTimer() {
    //   timer = setInterval(() => {
    //     let option = myChart.getOption();
    //     option.series[1].startAngle = option.series[1].startAngle - 1;
    //     myChart.setOption(option);
    //   }, 100);
    // }
    // setTimeout(startTimer, 0);
    option = {
      title: titleArr,
      series: seriesArr,
    };
    myChart.setOption(option);
  }
}
//市民满意率
publicSatisfactionEchart();
function publicSatisfactionEchart() {
  let linePassengerVC = document.getElementsByClassName(
    "publicSatisfactionEchart"
  );
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    var img =
      "";
    var trafficWay = [
      {
        name: "10号线二期",
        value: 90,
      },
      {
        name: "14号线",
        value: 86.67,
      },
      {
        name: "15号线",
        value: 83.87,
      },
      {
        name: "18号线",
        value: 85.71,
      },
    ];

    var data = [];
    var color = [
      "#00ffff",
      "#00cfff",
      "#006ced",
      "#ffe000",
      "#ffa800",
      "#ff5b00",
      "#ff3000",
    ];
    for (var i = 0; i < trafficWay.length; i++) {
      data.push(
        {
          value: trafficWay[i].value,
          name: trafficWay[i].name,
          itemStyle: {
            normal: {
              borderWidth: 5,
              shadowBlur: 20,
              borderColor: color[i],
              shadowColor: color[i],
            },
          },
        },
        {
          value: 2,
          name: "",
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              color: "rgba(0, 0, 0, 0)",
              borderColor: "rgba(0, 0, 0, 0)",
              borderWidth: 0,
            },
          },
        }
      );
    }
    var seriesOption = [
      {
        name: "",
        type: "pie",
        clockWise: false,
        radius: ["50%", "50%"],
        hoverAnimation: false,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: "outside",
              color: "#ddd",
              formatter: function (params) {
                var percent = 0;
                var total = 0;
                for (var i = 0; i < trafficWay.length; i++) {
                  total += trafficWay[i].value;
                }
                percent = params.value.toFixed(0);
                if (params.name !== "") {
                  return params.name + "：" + percent + "%";
                } else {
                  return "";
                }
              },
            },
            labelLine: {
              length: 30,
              length2: 20,
              show: true,
              color: "#00ffff",
            },
          },
        },
        data: data,
      },
    ];
    option = {
      color: color,
      title: {
        text: "市民满意率",
        top: "45%",
        textAlign: "center",
        left: "49%",
        textStyle: {
          color: "#fff",
          fontSize: 22,
          fontWeight: "400",
        },
      },
      graphic: {
        elements: [
          {
            type: "image",
            z: 3,
            style: {
              image: img,
              width: 128,
              height: 128,
            },
            left: "center",
            top: "center",
            position: [100, 100],
          },
        ],
      },
      tooltip: {
        show: false,
      },
      legend: {
        icon: "circle",
        orient: "horizontal",
        // x: 'left',
        data: ["10号线二期", "14号线", "15号线", "18号线"],
        top: "5%",
        align: "right",
        textStyle: {
          color: "#fff",
        },
        itemGap: 20,
      },
      toolbox: {
        show: false,
      },
      series: seriesOption,
    };
    myChart.setOption(option);
  }
}
//建设项目风险评估总览
riskAssessmentEchart();
function riskAssessmentEchart() {
  let linePassengerVC = document.getElementsByClassName("riskAssessmentEchart");
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    var fourPieData = [
      {
        title: "全网风险",
        value1: 156,
        value2: 27,
      },
      {
        title: "致命性风险",
        value1: 97,
        value2: 17,
      },
    ];
    var titleArr = [],
      legendArr = [],
      seriesArr = [];
    fourPieData.forEach(function (item, index) {
      titleArr.push({
        text: item.title,
        left: index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
        bottom: "8%",
        textAlign: "center",
        textStyle: {
          fontSize: 12,
          color: "#ffffff",
        },
      });
      legendArr.push({
        orient: "horizontal",
        left: "center",
        data: ["当前", "总量"],
        left: index < 2 ? index * 50 + 6 + "%" : index * 50 - 75 + "%",
        bottom: "15%",
        icon: "circle",
        itemGap: 50,
        textStyle: {
          color: "#fff",
          padding: [3, 0, 0, 0],
        },
      });
      seriesArr.push(
        {
          name: "访问来源",
          type: "pie",
          hoverAnimation: false,
          legendHoverLink: false,
          radius: "28%",
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
            index < 2 ? "50%" : "50%",
          ],
          label: {
            show: true,
            formatter: "{c}",
          },
          data: [
            {
              value: item.value2,
              name: "当前",
              itemStyle: {
                normal: { color: "#ffc545" },
                emphasis: { color: "#ffc545" },
              },
            },
            {
              value: item.value1,
              name: "总量",
              itemStyle: {
                normal: { color: "#22cfe0" },
                emphasis: { color: "#22cfe0" },
              },
            },
          ],
        },
        {
          name: "大环",
          type: "gauge",
          splitNumber: 30,
          radius: "42%",
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
            index < 2 ? "50%" : "50%",
          ],
          startAngle: 90,
          endAngle: -269.9999,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: true,
            length: 5,
            lineStyle: {
              color: "#1cbdca",
            },
          },
          splitLine: {
            show: false,
            length: 3,
          },
          axisLabel: {
            show: false,
          },
          detail: {
            show: false,
          },
        },
        {
          type: "pie",
          zlevel: 2,
          silent: true,
          radius: ["46%", "48%"],
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
            index < 2 ? "50%" : "50%",
          ],
          startAngle: 85,
          label: {
            normal: {
              show: false,
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
          data: _pie2(),
        }
      );
    });

    function _pie2() {
      let dataArr = [];
      for (var i = 0; i < 8; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 18,
            itemStyle: {
              normal: {
                color: "#1fbfcd",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              },
            },
          });
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 2,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              },
            },
          });
        }
      }
      return dataArr;
    }
    option = {
      legend: legendArr,
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      title: titleArr,
      series: seriesArr,
    };
    myChart.setOption(option);
  }
}
//建设项目风险节点进展总览
projectRiskEchart();
function projectRiskEchart() {
  let projectRiskE = document.getElementsByClassName("projectRiskEchart");
  for (var i = 0; i < projectRiskE.length; i++) {
    let myChart = echarts.init(projectRiskE[i]);
    let data = {
      xData: ["基坑", "区间", "旁通道", "基坑", "区间", "旁通道"],
      yData: [20, 98, 38, 13, 73, 11],
    };
    option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: [
        {
          top: "10%",
          bottom: 56,
          right: "5%",
        },
        {
          width: "85%",
          height: 45,
          bottom: 10,
          righ: 0,
        },
      ],
      xAxis: [
        {
          type: "category",
          data: data.xData,
          gridIndex: 0,
          axisLabel: {
            color: "#fff",
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            lineStyle: {
              color: "#fff",
            },
          },
          zlevel: 2,
        },
        {
          type: "category",
          gridIndex: 1,
          axisLine: {
            show: false,
          },
          zlevel: 1,
        },
      ],
      yAxis: [
        {
          type: "value",
          gridIndex: 0,
          axisLabel: {
            color: "#fff",
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        {
          type: "value",
          gridIndex: 1,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          data: data.yData,
          type: "bar",
          label: {
            show: true,
            position: "top",
            textStyle: {
              color: "#fff",
            },
          },
          itemStyle: {
            normal: {
              color: (params) => {
                let colors = [
                  "#4150d8",
                  "#28bf7e",
                  "#ed7c2f",
                  "#4150d8",
                  "#28bf7e",
                  "#ed7c2f",
                  // "#f2a93b",
                  // "#f9cf36",
                  // "#4a5bdc",
                  // "#4cd698",
                  // "#f4914e",
                  // "#fcb75b",
                  // "#ffe180",
                  // "#b6c2ff",
                  // "#96edc1",
                ];
                return colors[params.dataIndex];
              },
            },
          },
          xAxisIndex: 0,
          yAxisIndex: 0,
        },
        {
          data: [
            {
              name: "全网风险",
              value: 1,
            },
          ],
          label: {
            show: true,
            position: "inside",
            formatter: "{b}",
            offset: [0, 10],
            textStyle: {
              color: "#fff",
            },
          },
          type: "bar",
          barGap: 0,
          barWidth: "52%",
          itemStyle: {
            normal: {
              color: "rgba(134,176,237, .5)",
            },
          },
          xAxisIndex: 1,
          yAxisIndex: 1,
        },
        {
          data: [
            {
              name: "致命性风险",
              value: 1,
            },
          ],
          label: {
            show: true,
            position: "inside",
            formatter: "{b}",
            offset: [0, 10],
            textStyle: {
              color: "#fefefe",
            },
          },
          type: "bar",
          barGap: 0,
          barWidth: "50%",
          itemStyle: {
            normal: {
              color: "rgba(40,191,126, .5)",
            },
          },
          xAxisIndex: 1,
          yAxisIndex: 1,
        },
      ],
    };

    myChart.setOption(option);
  }
}
//投资完成率
investmentCompletionEchart();
function investmentCompletionEchart() {
  let investmentCompletionE = document.getElementsByClassName(
    "investmentCompletionEchart"
  );
  for (var i = 0; i < investmentCompletionE.length; i++) {
    let myChart = echarts.init(investmentCompletionE[i]);
    var fourPieData = [
      {
        name: "10号线二期",
        max: 100,
        value: 64.87,
      },
      {
        name: "14号线",
        max: 100,
        value: 50.4,
      },
      {
        name: "15号线",
        max: 100,
        value: 57.66,
      },
      {
        name: "18号线",
        max: 100,
        value: 64.89,
      },
    ];

    var titleArr = [],
      seriesArr = [];
    colors = [
      ["#57bbf7", "#f4f4f7"],
      ["#ffc969", "#f4f4f7"],
      ["#f38b97", "#f4f4f7"],
      ["#b1d882", "#f4f4f7"],
      ["#c0acf9", "#f4f4f7"],
    ];
    fourPieData.forEach(function (item, index) {
      titleArr.push({
        text: item.name,
        left: index < 2 ? index * 50 + 15 + "%" : index * 50 - 65 + "%",
        top: index < 2 ? "40%" : "90%",
        textAlign: "center",
        textStyle: {
          fontWeight: "normal",
          fontSize: "12",
          color: colors[index][0],
          textAlign: "center",
        },
      });
      seriesArr.push({
        name: item.name,
        type: "pie",
        clockWise: false,
        radius: [30, 38],
        itemStyle: {
          normal: {
            color: colors[index][0],
            shadowColor: colors[index][0],
            shadowBlur: 0,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
          },
        },
        hoverAnimation: false,
        center: [
          index < 2 ? index * 50 + 15 + "%" : index * 50 - 65 + "%",
          index < 2 ? "22%" : "72%",
        ],
        data: [
          {
            value: item.value,
            label: {
              normal: {
                formatter: function (params) {
                  return params.value + "%";
                },
                position: "center",
                show: true,
                textStyle: {
                  fontSize: "14",
                  fontWeight: "bold",
                  color: colors[index][0], //跟随其他颜色
                },
              },
            },
          },
          {
            value: item.max - item.value,
            name: "invisible",
            itemStyle: {
              normal: {
                color: colors[index][1],
              },
              emphasis: {
                color: colors[index][1],
              },
            },
          },
        ],
      });
    });
    var option = {
      title: titleArr,
      series: seriesArr,
    };
    myChart.setOption(option);
  }
}
// 动迁完成率
relocationCompletionEchart();
function relocationCompletionEchart() {
  let linePassengerVC = document.getElementsByClassName(
    "relocationCompletionEchart"
  );
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    option = {
      tooltip: {},
      animationDurationUpdate: function (idx) {
        // 越往后的数据延迟越大
        return idx * 100;
      },
      animationEasingUpdate: "bounceIn",
      color: ["#fff", "#fff", "#fff"],
      series: [
        {
          type: "graph",
          layout: "force",
          force: {
            repulsion: 600,
            edgeLength: 200,
          },
          roam: true,
          label: {
            normal: {
              show: true,
              position: "inside",
              formatter: "{b}",
              fontSize: 12,
              fontStyle: "600",
            },
          },
          data: [
            {
              name: "10号线二期动迁数",
              value: 10000,
              x: 500,
              y: 56,
              symbolSize: 50,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "#FF8C00",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "#FF8C00",
                  color: "#FF8C00",
                },
              },
            },
            {
              name: "18号线一期动迁数",
              value: 6181,
              x: 0,
              y: 0,
              symbolSize: 50,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "#FF4500",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "#FF4500",
                  color: "#FF4500",
                },
              },
            },
            {
              name: "动迁数(户/家)总量",
              value: 4055,
              symbolSize: 80,
              x: 0,
              y: 0,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "#4DFB37",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "#4DFB37",
                  color: "#4DFB37",
                },
              },
            },
            {
              name: "14号线动迁数",
              value: 2467,
              x: 0,
              y: 0,
              symbolSize: 50,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "#00BFFF",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "#00BFFF",
                  color: "#00BFFF",
                },
              },
            },
            {
              name: "15号线动迁数",
              value: 2244,
              x: 0,
              y: 0,
              symbolSize: 50,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "#FFD700",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "#FFD700",
                  color: "#FFD700",
                },
              },
            },
          ],
          links: [
            {
              source: "15号线动迁数",
              target: "动迁数(户/家)总量",
            },
            {
              source: "18号线一期动迁数",
              target: "动迁数(户/家)总量",
            },
            {
              source: "10号线二期动迁数",
              target: "动迁数(户/家)总量",
            },
            {
              source: "14号线动迁数",
              target: "动迁数(户/家)总量",
            },
          ],
        },
      ],
    };
    myChart.setOption(option);
  }
}

//信用评价历史对比
creditEvaluationEchart();
function creditEvaluationEchart() {
  let linePassengerVC = document.getElementsByClassName(
    "creditEvaluationEchart"
  );
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    option = {
      animationDurationUpdate: function (idx) {
        // 越往后的数据延迟越大
        return idx * 100;
      },
      animationEasingUpdate: "bounceIn",
      color: ["#fff", "#fff", "#fff"],
      series: [
        {
          type: "graph",
          layout: "force",
          force: {
            repulsion: 100,
            edgeLength: 10,
          },
          roam: true,
          label: {
            normal: {
              show: true,
            },
          },
          data: [
            {
              name: "中交",
              value: 10000,
              symbolSize: 50,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "rgb(27, 94, 93)",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "rgb(27, 94, 93)",
                  color: "rgb(27, 94, 93)",
                },
              },
            },
            {
              name: "腾达",
              value: 6181,
              symbolSize: 50,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "rgb(206, 188, 11)",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "rgb(206, 188, 11)",
                  color: "rgb(206, 188, 11)",
                },
              },
            },
            {
              name: "宏润",
              value: 4386,
              symbolSize: 50,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "rgb(165, 190, 198)",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "rgb(165, 190, 198)",
                  color: "rgb(165, 190, 198)",
                },
              },
            },
            {
              name: "建工",
              value: 4055,
              symbolSize: 50,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "rgb(98, 41, 72)",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "rgb(98, 41, 72)",
                  color: "rgb(98, 41, 72)",
                },
              },
            },
            {
              name: "隧道",
              value: 2467,
              symbolSize: 50,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "rgb(175, 20, 143)",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "rgb(175, 20, 143)",
                  color: "rgb(175, 20, 143)",
                },
              },
            },
            {
              name: "中铁建",
              value: 2244,
              symbolSize: 50,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "rgb(77, 231, 55)",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "rgb(77, 231, 55)",
                  color: "rgb(77, 231, 55)",
                },
              },
            },
            {
              name: "中铁工",
              value: 1898,
              symbolSize: 50,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "rgb(26, 83, 246)",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "rgb(26, 83, 246)",
                  color: "rgb(26, 83, 246)",
                },
              },
            },
            {
              name: "中建八局",
              value: 1484,
              symbolSize: 50,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "rgb(155, 118, 127)",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "rgb(155, 118, 127)",
                  color: "rgb(155, 118, 127)",
                },
              },
            },
            {
              name: "浦东建设",
              value: 1112,
              symbolSize: 50,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "rgb(116, 207, 18)",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "rgb(116, 207, 18)",
                  color: "rgb(116, 207, 18)",
                },
              },
            },
          ],
        },
      ],
    };
    myChart.setOption(option);
  }
}
//验收合格率
acceptanceRateEchart();
function acceptanceRateEchart() {
  let linePassengerVC = document.getElementsByClassName("acceptanceRateEchart");
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    /**
     * 照着一个案例改的
     * 增加下面的数值显示
     * */
    var myData = ["10号线二期", "14号线", "15号线", "18号线"];
    var lineData = [10, 10, 10, 10];
    var lastYearData = {
      1: [5, 10, 10, 10],
    };
    var thisYearData = {
      1: [5, 10, 10, 10],
    };
    var timeLineData = [1];
    var background = "#0e2147"; //背景

    var option = {
      baseOption: {
        backgroundColor: background,
        timeline: {
          show: false,
          top: 0,
          data: [],
        },
        legend: {
          top: "5%",
          left: "31%",
          itemWidth: 22,
          itemHeight: 22,
          itemGap: 343,
          icon: "horizontal",
          textStyle: {
            color: "#ffffff",
            fontSize: 20,
          },
          data: ["验收合格数", "验收次数"],
        },
        grid: [
          {
            show: false,
            left: "5%",
            top: "10%",
            bottom: "8%",
            containLabel: true,
            width: "37%",
          },
          {
            show: false,
            left: "51%",
            top: "10%",
            bottom: "11%",
            width: "0%",
          },
          {
            show: false,
            right: "2%",
            top: "10%",
            bottom: "8%",
            containLabel: true,
            width: "37%",
          },
        ],
        xAxis: [
          {
            type: "value",
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            position: "bottom",
            axisLabel: {
              show: true,
              //     formatter:function(value)
              //   {
              //         //return '\n\n\n\n' + value;
              //      // return '\n' + value
              //      return value
              //      // return value + 'virus'
              //     // return value.split("").join("\n");
              //   },
              textStyle: {
                color: "white",
              },
            },
            splitLine: {
              show: false,
            },
          },
          {
            gridIndex: 1,
            show: false,
          },
          {
            gridIndex: 2,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            position: "bottom",
            axisLabel: {
              show: true,
              interval: 0,
              // formatter:function(value)
              //   {
              //         //return '\n\n\n\n' + value;
              //     //  return '\n' + value
              //   return value
              //      // return value + 'virus'
              //     // return value.split("").join("\n");
              //   },
              textStyle: {
                color: "white",
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            inverse: true,
            position: "right",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            data: myData,
          },
          {
            gridIndex: 1,
            type: "category",
            inverse: true,
            position: "left",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              //  formatter:function(value)
              //   {

              //      // return '\n' + value
              //      return value + '\n\n'
              //      // return value + 'virus'
              //   },
              textStyle: {
                color: "#ffffff",
                fontSize: 20,
              },
            },
            data: myData.map(function (value) {
              return {
                value: value,
                textStyle: {
                  align: "center",
                },
              };
            }),
          },
          {
            gridIndex: 2,
            type: "category",
            inverse: true,
            position: "left",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            data: myData,
          },
        ],
        series: [],
      },
      options: [],
    };

    option.baseOption.timeline.data.push(timeLineData[0]);
    option.options.push({
      series: [
        {
          type: "pictorialBar",
          xAxisIndex: 0,
          yAxisIndex: 0,
          // symbol: 'rect',
          itemStyle: {
            normal: {
              color: "rgba(0,0,0,0)",
            },
          },
          barWidth: 10,
          // symbolRepeat: true,
          // symbolSize: 14,
          data: lineData,
          barGap: "-100%",
          barCategoryGap: 0,
          label: {
            normal: {
              show: true,
              formatter: (series) => {
                return lastYearData[timeLineData[0]][series.dataIndex];
              },
              position: "insideTopLeft",
              textStyle: {
                color: "#ffffff",
                fontSize: 20,
              },
              offset: [0, -10],
            },
          },
          z: -100,
          animationEasing: "elasticOut",
          animationDelay: function (dataIndex, params) {
            return params.index * 30;
          },
        },
        {
          name: "验收合格数",
          type: "bar",
          xAxisIndex: 0,
          yAxisIndex: 0,
          //  symbol: 'rect',
          barWidth: 10,
          itemStyle: {
            normal: {
              barBorderRadius: 5,
              color: "#039372",
            },
          },
          // symbolRepeat: true,
          // symbolSize: 14,
          data: lastYearData[timeLineData[0]],
          // animationEasing: 'elasticOut',
          // animationDelay: function (dataIndex, params) {
          //     return params.index * 30 * 1.1;
          // }
        },
        {
          type: "pictorialBar",
          xAxisIndex: 2,
          yAxisIndex: 2,
          symbol: "rect",
          itemStyle: {
            normal: {
              color: "rgba(0,0,0,0)",
            },
          },
          barWidth: 10,
          symbolRepeat: true,
          symbolSize: 14,
          data: lineData,
          barGap: "-100%",
          barCategoryGap: 0,
          label: {
            normal: {
              show: true,
              formatter: (series) => {
                return;
              },
              position: "insideTopRight",
              textStyle: {
                color: "#ffffff",
                fontSize: 20,
              },
              offset: [0, -10],
            },
          },
          z: -100,
          animationEasing: "elasticOut",
          animationDelay: function (dataIndex, params) {
            return;
          },
        },
        {
          name: "验收次数",
          type: "bar",
          xAxisIndex: 2,
          yAxisIndex: 2,
          //   symbol: 'rect',
          barWidth: 10,
          itemStyle: {
            normal: {
              barBorderRadius: 5,
              color: "#36d7b6",
            },
          },
          // symbolRepeat: true,
          // symbolSize: 14,
          data: thisYearData[timeLineData[0]],
          // animationEasing: 'elasticOut',
          // animationDelay: function (dataIndex, params) {
          //     return params.index * 30 * 1.1;
          // }
        },
      ],
    });
    myChart.setOption(option);
  }
}

// 用款/概算比率
budgetEstimateEchart();
function budgetEstimateEchart() {
  let linePassengerVC = document.getElementsByClassName("budgetEstimateEchart");
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    var labeStyle = {
      position: "right", //标签数据显示的位置
      show: true,
      formatter: "{c}", //加单位
      color: "#fff",
    };
    var option = {
      legend: {
        top: "3%",
        icon: "roundRect", //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，nonei
        // data:['检查','维修','更换','未处理'],
        data: [
          {
            name: "10号线二期",
            icon:
              "image://",
          },
          {
            name: "14号线",
            icon:
              "image://",
          },
          {
            name: "15号线",
            icon:
              "image://",
          },
          {
            name: "18号线",
            icon:
              "image://",
          },
        ],
        itemGap: 10,
        itemWidth: 20,
        itemHeight: 10,
        textStyle: {
          color: "#fff",
          padding: [3, 0, 0, 0],
        },
      },
      grid: [
        {
          //左侧的柱状图grid
          width: "100%",
          left: "5%",
          top: "15%",
          right: "0",
          bottom: "0",
        },
      ],
      xAxis: [
        {
          //左侧柱状图的X轴
          gridIndex: 0, //x 轴所在的 grid 的索引
          show: false,
        },
      ],
      yAxis: [
        {
          //左侧柱状图的Y轴
          gridIndex: 0, //y轴所在的 grid 的索引
          splitLine: "none",
          axisTick: "none",
          axisLine: "none",
          axisLabel: {
            verticalAlign: "bottom",
            align: "left",
            padding: [0, 0, 15, 10],
            textStyle: {
              color: "#FFFFFF",
              fontSize: "12",
            },
          },
          data: ["10号线二期", "14号线", "15号线", "18号线"],
          inverse: true,
        },
        {
          //左侧柱状图的Y轴
          gridIndex: 0, //y轴所在的 grid 的索引
          splitLine: "none",
          axisTick: "none",
          axisLine: "none",
          axisLabel: {
            verticalAlign: "bottom",
            align: "right",
            padding: [0, 310, 15, 0],
            textStyle: {
              color: "#FFFFFF",
              fontSize: "12",
            },
          },
          data: ["77.10%", "77.10%", "77.10%", "77.10%"],
          inverse: true,
        },
        {
          //左侧柱状图的Y轴
          gridIndex: 0, //y轴所在的 grid 的索引
          splitLine: "none",
          axisTick: "none",
          axisLine: "none",
          data: [72.61, 504.42, 421.36, 388.81],
          inverse: true,
          axisLabel: {
            show: true,
            verticalAlign: "bottom",
            align: "center",
            padding: [0, 200, 15, 0],
            textStyle: {
              color: "#fff",
              fontSize: "12",
            },
            formatter: function (value) {
              return value + "亿元";
            },
            rich: {
              y: {
                color: "#befbff",
                fontSize: 12,
              },
              x: {
                color: "#f6cf42",
                fontSize: 16,
              },
            },
          },
        },
        {
          //左侧柱状图的Y轴
          gridIndex: 0, //y轴所在的 grid 的索引
          splitLine: "none",
          axisTick: "none",
          axisLine: "none",
          data: [],
        },
      ],
      series: [
        {
          name: "10号线二期",
          type: "bar",
          xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
          yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
          data: [55.981, , ,],
          barWidth: 15,
          label: labeStyle,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                ["rgba(68, 180, 255, 0.2)", "rgba(68, 180, 255, 1)"].map(
                  (color, offset) => ({
                    color,
                    offset,
                  })
                )
              ),
            },
          },
          z: 2,
        },
        {
          name: "14号线",
          type: "bar",
          xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
          yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
          data: [, 312.247, ,],
          barWidth: 15,
          label: labeStyle,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                ["rgba(22, 231, 56, 0.2)", "rgba(22, 231, 56, 1)"].map(
                  (color, offset) => ({
                    color,
                    offset,
                  })
                )
              ),
            },
          },
          z: 2,
        },
        {
          name: "15号线",
          type: "bar",
          xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
          yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
          data: [, , 239.83],
          barWidth: 15,
          label: labeStyle,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                ["rgba(253, 191, 25, 0.2)", "rgba(253, 191, 25, 1)"].map(
                  (color, offset) => ({
                    color,
                    offset,
                  })
                )
              ),
            },
          },
          z: 2,
        },
        {
          name: "18号线",
          type: "bar",
          xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
          yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
          data: [, , , 233.8],
          barWidth: 15,
          label: labeStyle,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                ["rgba(255, 57, 57, 0.2)", "rgba(255, 57, 57, 1)"].map(
                  (color, offset) => ({
                    color,
                    offset,
                  })
                )
              ),
            },
          },
          z: 2,
        },
        {
          name: "外框",
          type: "bar",
          xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
          yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
          barGap: "-100%",
          data: [1554, 1554, 1554, 1554],
          barWidth: 15,
          itemStyle: {
            normal: {
              color: "rgba(255, 255, 255, 0.15)",
              barBorderRadius: 6,
            },
          },
          z: 0,
        },
        {
          name: "10号线二期",
          type: "pictorialBar",
          symbol:
            "image://",
          symbolSize: [50, 50],
          symbolOffset: [20, 0],
          z: 12,
          itemStyle: {
            normal: {
              color: "#fff",
            },
          },
          data: [
            {
              value: 55.981,
              symbolPosition: "end",
            },
            {
              value: 0,
              symbolPosition: "end",
            },
            {
              value: 0,
              symbolPosition: "end",
            },
            {
              value: 0,
              symbolPosition: "end",
            },
          ],
        },
        {
          name: "14号线",
          type: "pictorialBar",
          symbol:
            "image://",
          symbolSize: [50, 50],
          symbolOffset: [20, 0],
          itemStyle: {
            normal: {
              color: "#fff",
            },
          },
          z: 12,
          data: [
            {
              value: 0,
              symbolPosition: "end",
            },
            {
              value: 312.247,
              symbolPosition: "end",
            },
            {
              value: 0,
              symbolPosition: "end",
            },
            {
              value: 0,
              symbolPosition: "end",
            },
          ],
        },
        {
          name: "15号线",
          type: "pictorialBar",
          symbol:
            "image://",
          symbolSize: [50, 50],
          symbolOffset: [20, 0],
          z: 12,
          itemStyle: {
            normal: {
              color: "#fff",
            },
          },
          data: [
            {
              value: 0,
              symbolPosition: "end",
            },
            {
              value: 0,
              symbolPosition: "end",
            },
            {
              value: 239.83,
              symbolPosition: "end",
            },
            {
              value: 0,
              symbolPosition: "end",
            },
          ],
        },
        {
          name: "18号线",
          type: "pictorialBar",
          symbol:
            "image://",
          symbolSize: [50, 50],
          symbolOffset: [20, 0],
          z: 12,
          itemStyle: {
            normal: {
              color: "#fff",
            },
          },
          data: [
            {
              value: 0,
              symbolPosition: "end",
            },
            {
              value: 0,
              symbolPosition: "end",
            },
            {
              value: 0,
              symbolPosition: "end",
            },
            {
              value: 233.8,
              symbolPosition: "end",
            },
          ],
        },
      ],
    };
    myChart.setOption(option);
  }
}
//用款/目标成本比率
targeCostEchart();
function targeCostEchart() {
  let targeCostE = document.getElementsByClassName("targeCostEchart");
  for (var i = 0; i < targeCostE.length; i++) {
    let myChart = echarts.init(targeCostE[i]);
    option = {
      title: {
        show: true,
        text: "单位：亿元",
        top: "10%",
        left: "5%",
        textStyle: {
          color: "#fff",
          fontSize: 12,
        },
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      grid: {
        top: "20%",
        left: "3%",
        right: "3%",
        bottom: "3%",
        containLabel: true,
      },
      legend: {
        itemGap: 5,
        left: 0,
        right: "2%",
        top: "2%",
        data: ["用款", "目标成本", "本月用款/目标成本比率"],
        itemWidth: 10,
        itemHeight: 5,
        textStyle: {
          fontSize: "12px",
          color: "#fff",
        },
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: true,
          axisLine: {
            //坐标轴轴线相关设置。数学上的x轴
            show: false,
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {
            //坐标轴刻度标签的相关设置
            textStyle: {
              color: "#fff",
              margin: 15,
            },
          },
          axisTick: {
            show: false,
          },
          data: ["10号线二期", "14号线", "15号线", "18号线"],
        },
      ],
      yAxis: [
        {
          name: "",
          type: "value",
          min: 0,
          splitNumber: 7,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#e6e5e5",
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            margin: 20,
            textStyle: {
              color: "#fff",
            },
            formatter: function (value, index) {
              return value.toFixed(1);
            },
          },
          axisTick: {
            show: false,
          },
        },
        {
          type: "value",
          name: "%",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12,
          },
          min: 0,
          max: 100,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#fff",
              fontSize: 12,
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "rgba(255,255,255,0.2)",
            },
          },
        },
      ],
      series: [
        // {
        //   name: "本月用款/目标成本比率",
        //   type: "line",
        //   symbol: "circle",
        //   symbolSize: 0,
        //   lineStyle: {
        //     normal: {
        //       color: "#5B9BD5", // 线条颜色
        //     },
        //     borderColor: "#5B9BD5",
        //   },
        //   itemStyle: {
        //     normal: {
        //       color: "#5B9BD5",
        //     },
        //   },
        //   data: [77.39, 66.34, 70.29, 66.29],
        // },
        {
          name: "本月用款/目标成本比率",
          type: "line",
          yAxisIndex: 1,
          smooth: false,
          symbol: "circle",
          symbolSize: 10,
          lineStyle: {
            normal: {
              width: 2,
            },
          },
          itemStyle: {
            normal: {
              color: "#5B9BD5",
            },
          },
          data: [77.39, 66.34, 70.29, 66.29],
          label: {
            normal: {
              show: false,
            },
          },
        },
        // {
        //   name: "上月用款/目标成本比率",
        //   type: "line",
        //   symbol: "circle",
        //   symbolSize: 0,
        //   lineStyle: {
        //     normal: {
        //       color: "#ED7D31", // 线条颜色
        //     },
        //   },
        //   itemStyle: {
        //     normal: {
        //       color: "#ED7D31",
        //     },
        //   },
        //   data: [76.17, 62.5, 65.13, 64.1],
        // },
        {
          name: "用款",
          type: "bar",
          barWidth: 30,
          barGap: "0%",
          color: "#5B9BD5",
          label: {
            show: true,
            position: "insideTop",
            textStyle: {
              color: "#fff",
            },
          },
          itemStyle: {
            normal: {
              barBorderRadius: 3,
            },
          },
          data: [56.872, 331.423, 258.825, 241.8],
        },
        {
          name: "目标成本",
          type: "bar",
          barWidth: 30,
          color: "#ED7D31",
          label: {
            show: true,
            position: "insideTop",
            textStyle: {
              color: "#fff",
            },
          },
          itemStyle: {
            normal: {
              barBorderRadius: 3,
            },
          },
          data: [73.49, 499.6, 368.22, 364.76],
        },
      ],
    };
    myChart.setOption(option);
  }
}
//用款/合同价比率;
contractPriceEchart();
function contractPriceEchart() {
  let contractPriceE = document.getElementsByClassName("contractPriceEchart");
  for (var i = 0; i < contractPriceE.length; i++) {
    let myChart = echarts.init(contractPriceE[i]);

    var category = [
      {
        name: "10号线二期",
        value: 82.71,
      },
      {
        name: "14号线",
        value: 78.18,
      },
      {
        name: "15号线",
        value: 83,
      },
      {
        name: "18号线",
        value: 68.93,
      },
    ]; // 类别
    var total = 100; // 数据总数
    var datas = [];
    category.forEach((value) => {
      datas.push(value.value);
    });
    option = {
      xAxis: {
        max: total,
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      grid: {
        left: "25%",
        top: "5%", // 设置条形图的边距
        right: "20%",
        bottom: "5%",
      },
      yAxis: [
        {
          type: "category",
          inverse: false,
          data: category,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
      ],
      series: [
        {
          // 内
          type: "bar",
          barWidth: 28,
          silent: true,
          itemStyle: {
            normal: {
              color: "#1588D1",
            },
          },
          label: {
            normal: {
              formatter: "{b}",
              textStyle: {
                color: "#fff",
                fontSize: 14,
              },
              position: "left",
              distance: 20, // 向右偏移位置
              show: true,
            },
          },
          data: category,
          z: 1,
          animationEasing: "elasticOut",
        },

        {
          // 分隔
          type: "pictorialBar",
          itemStyle: {
            normal: {
              color: "#07314a",
            },
          },
          symbolRepeat: "fixed",
          symbolMargin: 2,
          symbol: "rect",
          symbolClip: true,
          symbolSize: [3, 28],
          symbolPosition: "start",
          symbolOffset: [3, -4],
          symbolBoundingData: this.total,
          data: [total, total, total, total],
          z: 2,
          animationEasing: "elasticOut",
        },
        {
          // label
          type: "pictorialBar",
          symbolBoundingData: total,
          itemStyle: {
            normal: {
              color: "none",
            },
          },
          label: {
            normal: {
              formatter: (params) => {
                var text;
                text = "{f| " + ((params.data * 100) / total).toFixed(2) + "%}";
                return text;
              },
              rich: {
                f: {
                  color: "#ffffff",
                },
              },
              position: "right",
              distance: 10, // 向右偏移位置
              show: true,
            },
          },
          data: datas,
          z: 0,
        },

        {
          name: "外框",
          type: "bar",
          barGap: "-130%", // 设置外框粗细
          data: [total, total, total, total],
          barWidth: 45,
          itemStyle: {
            normal: {
              barBorderRadius: [5, 5, 5, 5],
              color: "transparent", // 填充色
              barBorderColor: "#1588D1", // 边框色
              barBorderWidth: 3, // 边框宽度
            },
          },
          z: 0,
        },
        {
          type: "scatter",
          name: "条形",
          symbol: "roundRect",
          symbolSize: [7, 20],
          symbolOffset: [3, -5],
          symbolKeepAspect: true,
          itemStyle: {
            normal: {
              color: "#1588D1",
            },
          },
          data: [total, total, total, total],
        },
      ],
    };
    // var equipment = ["10号线二期", "14号线", "15号线", "18号线"];
    // var project = ["10号线二期", "14号线", "15号线", "18号线"];
    // var colorList = [
    //   "#0090ff",
    //   "#06d3c4",
    //   "#ffbc32",
    //   "#2ccc44",
    //   "#ff3976",
    //   "#6173d6",
    //   "#914ce5",
    //   "#42b1cc",
    //   "#ff55ac",
    //   "#0090ff",
    //   "#06d3c4",
    //   "#ffbc32",
    //   "#2ccc44",
    //   "#ff3976",
    //   "#6173d6",
    //   "#914ce5",
    //   "#42b1cc",
    //   "#ff55ac",
    //   "#0090ff",
    //   "#06d3c4",
    //   "#ffbc32",
    //   "#2ccc44",
    //   "#ff3976",
    //   "#6173d6",
    //   "#914ce5",
    //   "#42b1cc",
    //   "#ff55ac",
    //   "#0090ff",
    //   "#06d3c4",
    //   "#ffbc32",
    //   "#2ccc44",
    //   "#ff3976",
    //   "#6173d6",
    //   "#914ce5",
    //   "#42b1cc",
    //   "#ff55ac",
    //   "#0090ff",
    //   "#06d3c4",
    //   "#ffbc32",
    //   "#2ccc44",
    //   "#ff3976",
    //   "#6173d6",
    //   "#914ce5",
    //   "#42b1cc",
    //   "#ff55ac",
    //   "#0090ff",
    //   "#06d3c4",
    //   "#ffbc32",
    //   "#2ccc44",
    //   "#ff3976",
    //   "#6173d6",
    //   "#914ce5",
    //   "#42b1cc",
    //   "#ff55ac",
    //   "#0090ff",
    //   "#06d3c4",
    //   "#ffbc32",
    //   "#2ccc44",
    //   "#ff3976",
    //   "#6173d6",
    //   "#914ce5",
    //   "#42b1cc",
    //   "#ff55ac",
    //   "#0090ff",
    //   "#06d3c4",
    //   "#ffbc32",
    //   "#2ccc44",
    //   "#ff3976",
    //   "#6173d6",
    //   "#914ce5",
    //   "#42b1cc",
    //   "#ff55ac",
    //   "#0090ff",
    //   "#06d3c4",
    //   "#ffbc32",
    //   "#2ccc44",
    //   "#ff3976",
    //   "#6173d6",
    //   "#914ce5",
    //   "#42b1cc",
    //   "#ff55ac",
    //   "#0090ff",
    //   "#06d3c4",
    //   "#ffbc32",
    //   "#2ccc44",
    //   "#ff3976",
    //   "#6173d6",
    //   "#914ce5",
    //   "#42b1cc",
    //   "#ff55ac",
    //   "#0090ff",
    //   "#06d3c4",
    //   "#ffbc32",
    //   "#2ccc44",
    //   "#ff3976",
    //   "#6173d6",
    //   "#914ce5",
    //   "#42b1cc",
    //   "#ff55ac",
    // ];
    // option = {
    //   tooltip: {
    //     formatter: function (param) {
    //       if (param.data.type == null) {
    //         return param.data.name + ":" + param.value + "个";
    //       } else {
    //         return param.data.type + ":" + param.value + "个";
    //       }
    //     },
    //   },

    //   series: [
    //     {
    //       name: "整体分类",
    //       type: "pie",
    //       radius: [0, "35%"],
    //       label: {
    //         position: "inner",
    //       },
    //       itemStyle: {
    //         normal: {
    //           borderColor: "#fff",
    //           borderWidth: 2,
    //           color: function (params) {
    //             return colorList[params.dataIndex];
    //           },
    //         },
    //       },

    //       selectedMode: "single",
    //       data: [
    //         {
    //           value: 875,
    //           name: "用款\n(亿元)",
    //         },
    //         {
    //           value: 1239,
    //           name: "合同价\n(亿元)",
    //         },
    //       ],
    //     },
    //     {
    //       name: "招标方式",
    //       type: "pie",
    //       radius: ["40%", "49%"],
    //       itemStyle: {
    //         normal: {
    //           color: function (params) {
    //             return colorList[params.dataIndex];
    //           },
    //         },
    //       },
    //       label: {
    //         normal: {
    //           formatter: function (params) {
    //             if (params.value != 0)
    //               return params.data.type + ":" + params.value + "亿元";
    //             else return "";
    //           },
    //           show: true,
    //         },
    //       },
    //       labelLine: {
    //         normal: {
    //           length: 1,
    //         },
    //       },
    //       data: [
    //         {
    //           value: 56.872,
    //           name: "用款(亿元)",
    //           type: equipment[0],
    //         },
    //         {
    //           value: 331.423,
    //           name: "用款(亿元)",
    //           type: equipment[1],
    //         },
    //         {
    //           value: 258.825,
    //           name: "用款(亿元)",
    //           type: equipment[2],
    //         },
    //         {
    //           value: 241.8,
    //           name: "用款(亿元)",
    //           type: equipment[3],
    //         },
    //         {
    //           value: 68.76,
    //           name: "合同价(亿元)",
    //           type: project[0],
    //         },
    //         {
    //           value: 423.91,
    //           name: "合同价(亿元)",
    //           type: project[1],
    //         },
    //         {
    //           value: 311.82,
    //           name: "合同价(亿元)",
    //           type: project[2],
    //         },
    //         {
    //           value: 350.81,
    //           name: "合同价(亿元)",
    //           type: project[3],
    //         },
    //       ],
    //     },
    //   ],
    // };
    myChart.setOption(option);
  }
}
